<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,
        body {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            overflow: hidden;
        }

        #viewDiv {
            position: absolute;
            right: 0;
            left: 0;
            top: 60px;
            bottom: 0;
        }

        .header {
            position: absolute;
            top: 0;
            width: 100%;
            height: 10%;
        }

        .btns {
            margin: 0 auto;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            overflow: auto;
        }

        .btn-switch {
            flex-grow: 4;
            background-color: rgba(34, 111, 14, 0.5);
            color: #fff;
            margin: 1px;
            width: 50%;
            padding: 20px;
            overflow: auto;
            text-align: center;
            cursor: pointer;
        }

        .active-map {
            color: #fff;
            background-color: rgba(34, 111, 14, 1);
        }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css"/>
    <script src="https://js.arcgis.com/4.18/"></script>
    <script>
        require(["esri/views/MapView", "esri/WebMap"],
            (MapView, WebMap) => {
                var webmapids = [
                    "ad5759bf407c4554b748356ebe1886e5",
                    "71ba2a96c368452bb73d54eadbd59faa",
                    "45ded9b3e0e145139cc433b503a8f5ab"
                ];

                function webmaps(index){
                    return new WebMap({
                        portalItem:{
                            id: webmapids[index]
                        }
                    });
                }

                let view = new MapView({
                    map:webmaps(0),
                    container:"viewDiv"
                });


                document.querySelector(".btns")
                    .addEventListener("click", (event) =>{
                        var id = event.target.getAttribute("data-id");
                        view.map=webmaps(id);
                    });
            });
    </script>
</head>
<body>
<section class="header esri-widget">
    <div class="btns">
        <div class="btn-switch active-map" data-id="0">失踪移民</div>
        <div class="btn-switch" data-id="1">难民路线</div>
        <div class="btn-switch" data-id="2">2015年欧洲海运到港</div>
    </div>
</section>
<div id="viewDiv"></div>
</body>
</html>
